<template>
  <div>
    <h3>StateToRefsDemo2</h3>
    <p>name {{ name }}</p>
    <p>role {{ role }}</p>
  </div>
</template>

<script>
// ref响值 reactive响对 toRefs响对的响值化（模板就幸福了）
import { ref, reactive, toRefs } from "vue";

export default {
  setup() {
    // step1：定义响对
    const state = reactive({
      name: "雷蒙多：又累又萌的小多多",
      role: "菊花Mate60宣传大使",
    });

    return {
      // step2：合集打散二合一
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped></style>
